{{setTitle     "菜单"}}
{{setSubTitle  "简单的菜单样式"}}
{{setActiveNav "menus"}}

{{addLocalCSS "/css/menus.css"}}

{{> header}}

<!-- adding to the top so that the dropdown example code can run -->
<script>
    {{{state}}}
</script>

<script src="http://yui.yahooapis.com/{{yui_version}}/build/yui/yui{{min}}.js"></script>
{{> prevent-scroll}}

<div class="content">

    <h2 class="content-subhead">横向菜单</h2>
    <p>
        通过添加类名{{code "pure-menu-horizontal"}}就可以创建一个横向的菜单，你可以给{{code "li"}}添加类名{{code "pure-menu-selected"}}让菜单项处于选中状态。
    </p>

    {{> menus/horizontal}}

  {{#code}}
    {{> menus/horizontal}}
  {{/code}}


    <h2 class="content-subhead">带标题的菜单</h2>
    <p>
        给你的菜单添加一标题，你可以在{{code "<ul>"}}元素外面放一些内容，然后用{{code "<a>"}}元素包裹起来，再添加个类名{{code "pure-menu-heading"}}就可以了。
    </p>

    {{> menus/heading}}

  {{#code}}
    {{> menus/heading}}
  {{/code}}


    <h2 class="content-subhead">纵向菜单</h2>
    <p>
        菜单默认是纵向的。你只需要添加类名{{code "pure-menu"}}就可以添加菜单样式，然后再添加{{code "pure-menu-open"}}去确保显示菜单。
    </p>

    {{> menus/vertical}}

  {{#code}}
    {{> menus/vertical}}
  {{/code}}


    <h2 class="content-subhead">下拉菜单</h2>
    <p>
        添加下拉菜单需要用到JavaScript。举个例子，使用YUI的{{code "Y.Menu"}}模块来添加下拉菜单。
    </p>

    {{> menus/dropdown}}

  {{#code}}
    {{> menus/dropdown}}
  {{/code}}


    <h2 class="content-subhead">带有禁用项的菜单</h2>
    <p>
        通过给{{code "<a>"}}元素添加一个类名{{code "pure-menu-disabled"}}可以标记它为禁用项，hover上去时，就没有样式了。
    </p>

    {{> menus/disabled}}

  {{#code}}
    {{> menus/disabled}}
  {{/code}}


    <h2 class="content-subhead">分页菜单</h2>
    <p>
        通过给{{code "<ul>"}}元素添加类名{{code "pure-paginator"}}就可以实现分页菜单。如果想让分页菜单看起来像是按钮，可以添加类名{{code "pure-button"}}，否则可以省略类名{{code "pure-button"}}。
    </p>

    {{> menus/paginator}}

  {{#code}}
    {{> menus/paginator}}
  {{/code}}

</div>
